<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.partManager.partContrast.structuralComparison')"
    @register="register"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :minHeight="450"
    :width="1200"
  >
    <Row :gutter="20">
      <Col span="24">
        <Space>
          <a-button type="dashed">{{
            t('routes.demo.partManager.partContrast.startCompare')
          }}</a-button>
          <a-button type="dashed">{{
            t('routes.demo.partManager.partContrast.endCompare')
          }}</a-button>
          <a-button type="dashed">{{
            t('routes.demo.partManager.partContrast.showDifference')
          }}</a-button>
          <a-button type="dashed">{{
            t('routes.demo.partManager.partContrast.outputDifference')
          }}</a-button>
        </Space>
      </Col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px">
      <Col span="12">
        <div style="overflow-y: scroll; overflow-x: hidden; height: 300px">
          <BasicTree :treeData="treeData" />
        </div>
      </Col>
      <Col span="12">
        <div style="overflow-y: scroll; overflow-x: hidden; height: 300px">
          <BasicTree :treeData="contrastTreeData" />
        </div>
      </Col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px">
      <Col span="24">
        <BasicTable @register="registerTable" />
      </Col>
    </Row>
    <template #insertFooter>
      <div style="display: inline; float: left">{{
        t('routes.demo.partManager.partContrast.tip')
      }}</div>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Row, Col, Space } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTree } from '/@/components/Tree/index';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { getPartContrastColumns } from './tableData';

  const { t } = useI18n();
  const treeData = ref<any>([
    {
      title: 'Node1',
      key: '0-0',
      children: [
        {
          title: 'Child Node1',
          key: '0-0-0',
        },
        {
          title: 'Child Node2',
          key: '0-0-1',
        },
      ],
    },
    {
      title: 'Node2',
      key: '0-1',
    },
  ]);

  const contrastTreeData = ref<any>([
    {
      title: 'Node1',
      key: '0-0',
      children: [
        {
          title: 'Child Node1',
          key: '0-0-0',
        },
        {
          title: 'Child Node2',
          key: '0-0-1',
        },
      ],
    },
    {
      title: 'Node2',
      key: '0-1',
    },
  ]);

  // 提交
  const handleSubmit = async () => {
    handleCancel();
  };

  // 取消
  const handleCancel = () => {
    closeModal();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({ confirmLoading: false });
  });

  // 初始化表格
  const [registerTable] = useTable({
    columns: getPartContrastColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    rowKey: 'id',
  });
</script>
